<template>
    <section>
        <el-col :span="24" style="padding: 18px 2px;">
            <el-button type="primary" icon="el-icon-circle-plus" round @click="newCard('add', 0)">添加</el-button>
        </el-col>
        <div>
            <el-col class="card" v-for="(device, index) in cardData">
                <el-card class="switch-box-card">
                    <div slot="header" class="clearfix">
                        <span class="text">{{ device['name'] }}</span>
                        <el-switch
                                v-model="lightStatus[index]"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                style="margin-right: 10px; float:right"
                                @change="lightSwitch(index)"
                        >
                        </el-switch>
                    </div>
                    <div>
                        <span style="line-height: 38px; margin-left: 2px">亮度</span>
                        <el-slider v-model="device.value" style="width: 79%; float:right; margin-right: 10px"
                                   @change="changSwitch(index)" :disabled="!lightStatus[index]"></el-slider>
                    </div>
                    <el-button type="primary" icon="el-icon-edit" size="mini" class="button" @click="newCard('edit', index)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="delCard(device)">删除</el-button>
                </el-card>
            </el-col>
        </div>

        <el-dialog title="填写信息" :visible.sync="editFormVisible">
            <div style="padding: 10px 0px;">
                <span style="line-height: 38px; margin-left: 5px">设备名称</span>
                <el-input v-model="from.name" class="input"></el-input>
            </div>
            <div style="padding: 10px 0px;">
                <span style="line-height: 38px; margin-left: 5px">设备编号</span>
                <el-input v-model="from.code" class="input"></el-input>
            </div>
            <div style="padding: 10px 0px;">
                <span style="line-height: 38px; margin-left: 5px">默认值</span>
                <el-input v-model="from.value" class="input"></el-input>
            </div>
            <div style="padding: 10px 0px;">
                <span style="line-height: 38px; margin-left: 5px">备注</span>
                <el-input v-model="from.description" class="input"></el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="newDevice()">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<style>
    .card {
        padding: 15px 4px;
        width: 320px
    }
    .input {
        width: 85%; margin-right: 20px; float:right;
    }
    .button {
        margin-left: 92px; margin-top: 40px
    }
    .text {
        font-size: 14px;
        color: lightseagreen;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .switch-box-card {
        width: 300px;
        height: 200px;
    }
</style>

<script>

    import {createDevice, getDevicesIndex, deleteDevice, editDevice, pwmSwitch} from '../../api/api';

    export default {
        data() {
            return {
                lightStatus: [],
                editFormVisible: false,
                cardData: {},
                cardNu: 0,
                from: {
                    name: '',
                    code: '',
                    value: 0,
                    type: 1,
                    status: 0,
                    description: '',
                },
                cardType: true, //true：新增 ， false：编辑
            };
        },
        methods: {
            test() {
                console.log("test");
            },
            newCard(type, index) {
                if (type == "edit") {
                    this.from.name = this.cardData[index]['name'];
                    this.from.code = this.cardData[index]['code'];
                    this.from.value = this.cardData[index]['value'];
                    this.from.type = 1; /* 1 为 控制设备 */
                    this.from.status = this.cardData[index]['status'];
                    this.from.description = this.cardData[index]['description'];
                    this.cardType = false;
                    this.from.id = this.cardData[index]['id'];
                } else {
                    this.from.name      = '暂无名称';
                    this.from.code      = '0';
                    this.from.value     = 85;
                    this.from.type      = 1; // 1 为 控制设备
                    this.from.status    = 0; // 0：关闭 1：开启 99：禁用
                    this.from.description = '暂无描述';
                    this.cardType       = true;
                }
                this.editFormVisible = true;
            },
            getDevice() {
                var obj = new Object();
                obj.type = 1;
                getDevicesIndex(obj).then((res) => {
                    if (res.data.code == "OK") {
                        this.cardNu = res.data.data.length;
                        this.cardData = res.data.data;
                        res.data.data.map((_, index) => {
                            if (_['status']) {
                                this.lightStatus[index] = true;
                            } else {
                                this.lightStatus[index] = false;
                            }
                        });
                    }
                });
            },
            lightControl(type, index) {
                var obj = new Object();
                obj.id = this.cardData[index]['id'];
                obj.code = this.cardData[index]['code'];
                obj.value = type ? this.cardData[index]['value'] : 0;
                pwmSwitch(obj).then((res) => {
                    if (res.data.code == "OK") {
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                        this.lightStatus[index] = false;
                    }
                });
            },
            lightSwitch(index) {
                if (this.lightStatus[index]) {
                    this.lightControl(true, index);
                } else {
                    this.lightControl(false, index);
                }
                this.getDevice();
            },
            changSwitch(index) {
                this.lightControl(true, index);
            },
            newDevice() {
                if (this.cardType) {
                    createDevice(this.from).then((res) => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getDevice();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
                } else {
                    editDevice(this.from).then((res) => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getDevice();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
                }
            },
            delCard(device) {
                deleteDevice(device).then((res) => {
                    this.$confirm('确认删除这个设备吗？', '提示', {}).then(() => {
                        if (res.data.code == "OK") {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            this.getDevice();
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    });
                });
            }
        },
        mounted() {
            this.getDevice();
        }
    }

</script>